<template>
	<div class="app">
		<myNavbar title="优惠券"></myNavbar>
		<div class="coupon_choose">
			<div class="coupon_choose-list" @click="swichNav(0)">
				<text :class="[currentTab==0 ? 'coupon_choose_title' : 'coupon_choose_title_no']">满减券</text>
				<div :class="[currentTab==0 ? 'coupon_choose_line_no' : 'coupon_choose_line']"></div>
			</div>
			<div class="coupon_choose-list" @click="swichNav(1)">
				<text :class="[currentTab==1 ? 'coupon_choose_title' : 'coupon_choose_title_no']">折扣券</text>
				<div :class="[currentTab==1 ? 'coupon_choose_line_no' : 'coupon_choose_line']"></div>
			</div>
			<div class="coupon_choose-list" @click="swichNav(2)">
				<text :class="[currentTab==2 ? 'coupon_choose_title' : 'coupon_choose_title_no']">兑换券</text>
				<div :class="[currentTab==2 ? 'coupon_choose_line_no' : 'coupon_choose_line']"></div>
			</div>
		</div>
		<slider :index="currentTab" class="swiper-box" :style="{height:allHeight}" @change="bindChange">
			<div class="swiper-item-box">
				<div class="coupon-shopList bs" v-if="fullReductionCouponList.length>0&&currentTab==0">
					<div class="coupon-couponList-top">
						<image :src="coupon.mchLogo" class="mchLogo"></image>
						<text class="mchName">{{coupon.mchName}}</text>
					</div>
					<list>
						<cell v-for="(item,index) in fullReductionCouponList">
							<div class="coupon-couponList">
								<div class="coupon-couponList-port1">
									<div class="coupon-couponList-port1-inner">
										<text class="coupon-couponList-port1-text1">￥</text>
										<text class="coupon-couponList-port1-text2">{{item.amount}}</text>
									</div>
								</div>
								<div class="coupon-couponList-port2">
									<div>
										<text class="coupon-couponList-port2-text1">{{item.name}}</text></div>
									<div>
										<text class="coupon-couponList-port2-text2">适用范围：{{item.tag}}</text>
									</div>
									<div>
										<text class="coupon-couponList-port2-text3">有限期至{{item.endDate}}</text>
									</div>
								</div>
							</div>
						</cell>
					
					</list>
					
				</div>
				<div class="gap" v-if="fullReductionCouponList.length>0&&currentTab==0"></div>
				<div class="coupon-none" v-if="fullReductionCouponList.length===0&&currentTab==0">
					<image class="coupon-none-image " src="http://cdn.rzico.com/v4.0/footprint-none.png"></image>
					<div><text class="coupon-none-text">暂无优惠券</text></div>
				</div>
			</div>
			<div class="swiper-item-box">
				<div class="coupon-shopList bs" v-if="discountCouponList.length>0&&currentTab==1">
					<div class="coupon-couponList-top">
						<image :src="coupon.mchLogo" class="mchLogo"></image>
						<text class="mchName">{{coupon.mchName}}</text>
					</div>
					<list>
						<cell v-for="(item,index) in discountCouponList">
							<div class="coupon-couponList">
								<div class="coupon-couponList-port1">
									<div class="coupon-couponList-port1-inner">
										<text class="coupon-couponList-port1-text2">{{item.amount}}</text>
										<text class="coupon-couponList-port1-text1">折</text>
									</div>
								</div>
								<div class="coupon-couponList-port2">
									<div><text class="coupon-couponList-port2-text1">{{item.name}}</text></div>
									<div>
										<text class="coupon-couponList-port2-text2">适用范围：{{item.tag}}</text>
									</div>
									<div>
										<text class="coupon-couponList-port2-text3">有限期至{{item.endDate}}</text>
									</div>
								</div>
							</div>
						</cell>
					</list>
				</div>
				<div class="gap"></div>
				<div class="coupon-none" v-if="discountCouponList.length==0&&currentTab==1">
					<image class="coupon-none-image " src="http://cdn.rzico.com/v4.0/footprint-none.png"></image>
					<div><text class="coupon-none-text">暂无折扣券</text></div>
				</div>
			</div>
			<div class="swiper-item-box">
				<div class="coupon-shopList bs" v-if="exchangeCouponList.length>0&&currentTab==2">
					<div class="coupon-couponList-top">
						<image :src="coupon.mchLogo" class="mchLogo"></image>
						<text class="mchName">{{coupon.mchName}}</text>
					</div>
					<list>
						<cell v-for="(item,index) in exchangeCouponList">
							<div class="coupon-couponList">
								<div class="coupon-couponList-port1">
									<image :src="item.productThumbnail" style="width: 130px;height:130px;border-radius: 6px;"></image>
								</div>
								<div class="coupon-couponList-port2">
									<div>
										<text class="coupon-couponList-port2-text1">兑换:{{item.productName}}</text>
									</div>
								</div>
							</div>
						</cell>
					</list>
				</div>
				<div class="gap"></div>
				<div class="coupon-none" v-if="exchangeCouponList.length==0&&currentTab==2">
					<image class="coupon-none-image " src="http://cdn.rzico.com/v4.0/footprint-none.png"></image>
					<text class="coupon-none-text">暂无兑换券</text>
				</div>
			</div>
		</slider>
	</div>
</template>
<script>
	import {
		list,
		count
	} from '../../../api/coupon.js'
	import myNavbar from '../../../components/myNavbar/myNavbar.vue'
	export default {
		name: '',
		data() {
			return {
				currentTab: 0,
				id: '',
				loadinging: false,
				refreshing: false,
				// allHeight: '1000px',
				coupon: {
					mchName: '',
					mchLogo: ','
				},
				fullReductionCouponList: [],
				exchangeCouponList: [],
				discountCouponList: []
			}
		},
		created() { // 在实例创建完成后被立即调用
			this.id = app.config.params
			this.getCouponData()
		},
		methods: {

			bindChange(e) {
				this.currentTab = e.index
				// if (e.index == 0) {
				// 	this.allHeight = (this.fullReductionCouponList.length * 300) + 60 + 'px'
				// } else if (e.index == 1) {
				// 	this.allHeight = (this.discountCouponList.length * 300) + 60 + 'px'
				// } else if (e.index == 2) {
				// 	this.allHeight = (this.exchangeCouponList.length * 300) + 60 + 'px'
				// }
			},
			swichNav: function(e) {
				this.currentTab = e
				// if (e == 0) {
				// 	this.allHeight = (this.fullReductionCouponList.length * 300) + 60 + 'px'
				// } else if (e == 1) {
				// 	this.allHeight = (this.discountCouponList.length * 300) + 60 + 'px'
				// } else if (e == 2) {
				// 	this.allHeight = (this.exchangeCouponList.length * 300) + 60 + 'px'
				// }
				// if (this.currentTab == e) {
				// 	return false;
				// } else {

					

				// }
			},
			//获取优惠券的数据
			getCouponData() {
				list({
					memberId: this.id,
					pageSize: 1000
				}).then(res => {
					this.coupon.mchName = res.data.data[0].mchName
					this.coupon.mchLogo = res.data.data[0].mchLogo

					res.data.data.forEach(item => {
						if (item.type === 0) {

							item.endDate = this.formatTime(item.endDate)
							this.fullReductionCouponList.push(item)


						} else if (item.type === 1) {
							item.endDate = this.formatTime(item.endDate)
							this.discountCouponList.push(item)
						} else if (item.type === 3) {
							item.endDate = this.formatTime(item.endDate)
							this.exchangeCouponList.push(item)
						}
					})
					// if (this.fullReductionCouponList.length > 0) {
					// 	this.allHeight = (this.fullReductionCouponList.length * 300) + 60 + 'px'
					// }

				})
			}
		},
		components: {
			myNavbar
		},
	}
</script>

<style scoped>
	.app {
		flex: 1;
		background-color: rgba(248, 248, 248, 0.8);
	}

	.navbar {
		width: 750px;
		height: 100px;
	}

	.swiper-item-box {
		flex: 1;
		width: 750px;
	}

	.refresh {
		height: 60px;
		width: 750px;
		display: -ms-flex;
		display: -webkit-flex;
		display: flex;

		-ms-flex-align: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
		justify-content: center;
		align-items: center;
		flex-direction: row;
	}

	.loading {
		justify-content: center;
		height: 50px;
		width: 750px;
		display: -ms-flex;
		display: -webkit-flex;
		display: flex;
		-ms-flex-align: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
		flex-direction: row;
		align-items: center;
	}

	.indicator {
		margin-top: 16px;
		height: 40px;
		width: 40px;

	}

	.coupon_choose {
		width: 750px;
		text-align: center;

		padding-left: 26px;
		padding-right: 26px;
		box-sizing: border-box;
		display: flex;
		height: 100px;
		flex-direction: row;
		background-color: rgb(253, 253, 253);
	}

	.coupon_choose-list {
		width: 250px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
	}

	.coupon_choose_title_no {
		font-size: 28px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		display: block;
		padding-bottom: 25px;
	}

	.coupon_choose_title {
		font-size: 28px;
		font-weight: 400;
		color: rgba(215, 38, 28, 1);
		display: block;
		padding-bottom: 25px
	}

	.swiper-box {
		display: block;
		flex: 1;
		width: 750px;
	}




	.coupon_choose_line {
		width: 49px;
		height: 10px;
		border-radius: 1px;
		background-color: white;
	}

	.coupon_choose_line_no {
		width: 49px;
		height: 10px;
		border-radius: 1px;
		background-image: linear-gradient(to top, rgba(231, 91, 83, 1), rgba(246, 171, 171, 1));
	}

	.coupon-shopList {
		margin: 40px 30px 0;
		padding: 30px 20px;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 16px;
		width: 690px;
		flex: 1;
	}

	.coupon-couponList-top {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.mchName {
		font-size: 30px;
		font-family: STSongti;
		font-weight: 900;
	}

	.mchLogo {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-right: 30px;
	}

	.coupon-couponList {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 30px;
		width: 650px;
		background-color: #FEF7EF;
		border-radius: 16px;
		color: #FF1010;
		margin-top: 30px;
	}

	.coupon-couponList-port1 {
		margin-right: 20px;
		/* flex-grow:2; */
		width: 130px;
		height: 130px;

	}

	.coupon-couponList-port1-inner {
		width: 130px;
		height: 130px;
		justify-content: center;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.coupon-couponList-port1-text1 {
		color: #FF1010;
		font-size: 24px;
		padding-top: 20px;
	}

	.coupon-couponList-port1-text2 {
		font-size: 60px;
		color: #FF1010;
		font-weight: bolder;
		margin-right: 10px;
	}



	.coupon-couponList-port2 {
		margin-right: 20px;
	}

	.coupon-couponList-port2-text1 {
		font-size: 30px;
		color: #FF1010;
		font-weight: 700;
		margin-bottom: 10px;

	}

	.coupon-couponList-port2-text2 {
		font-size: 24px;
		color: #F48583;
		margin-bottom: 5px;
	}

	.coupon-couponList-port2-text3 {
		font-size: 24px;
		color: #F48583;
	}

	.coupon-couponList-port3 {
		height: 40px;
		line-height: 40px;
		flex-grow: 1;
		color: #F48583;
		font-size: 24px;
		border: solid 1px #F48583;
		border-radius: 30px;
		text-align: center;
		padding: 5px;

	}

	.coupon-none {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 300px;
		width: 750px;
	}

	.coupon-none-image {
		text-align: center;
		display: block;
		margin: 0 auto;
		width: 196px;
		height: 131px;
	}

	.coupon-none-text {
		display: flex;
		flex-direction: row;
		justify-content: center;
		letter-spacing: 5px;
		font-size: 28px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		line-height: 42px;
		opacity: 0.3;
		margin-top: 30px;
	}

	/* 底部填充的空白块 */
	.gap {
		height: 50px;
		/* border: solid 1px black; */
	}
</style>
